
#main
  float: right
  width: 100%
  height: 100%
  overflow: auto
  -webkit-overflow-scrolling: touch
  transition: width .35s $time-function
  // &.fadeIn
  //   animation: fadeIn .6s $time-function
  &.open
    width: calc(100% - #{$sidebar-width})

.container
  max-width: $post-max-width
  width: $post-width-at-3-columns
  margin: auto
  padding: 0 10px


// Typogragh

h2, h3, h4, h5, h6
  margin-top: $post-paragraph-spacing * 1.5
  margin-bottom: $post-paragraph-spacing * .5
  color: $post-title-color

h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6
  margin-top: $post-paragraph-spacing


.post
  padding-top: 2em
  font-size: $post-font-size
  line-height: $post-line-height

  &-title
    margin: 0 0 $post-paragraph-spacing * .75
    font-size: 1.8em
    color: $post-title-color
  &-meta
    font-size: .9em
    color: $post-meta-color
    &-span
      margin-right: 1em
      &.date:before
        @extend %icon
        @extend %icon-clock
        margin-right: .2em
      &.tag:before
        @extend %icon
        @extend %icon-price-tags
        margin-right: .2em
      &.comment:before
        @extend %icon
        @extend %icon-bubble
        margin-right: .2em

  a
    word-break: break-all
    text-decoration: none
    color: $post-link-color
    outline: none
    &:hover
      color: $post-link-hover-color

  p, ul, ol
    margin-top: 0
    margin-bottom: $post-paragraph-spacing

  ul, ol
    padding-left: 1.5em

  li
    margin-bottom: $post-paragraph-spacing * .25
    > ul, > ol
      margin-top: $post-paragraph-spacing * .25
      margin-bottom: 0

  blockquote
    position: relative
    margin: 0 0 $post-paragraph-spacing 2em
    font-style: italic
    &:before
      @extend %icon
      @extend %icon-quotes-left
      position: absolute
      top: 0
      left: -1.5em
      z-index: 1
      transform: rotate(180deg)

  img
    display: block
    width: 100%
    border: $post-img-border-width solid $post-img-border-color

  code
    font-family: $post-code-font
    font-size: .9em

  *:not(pre) > code
    padding: 0 .25em
    color: $post-code-inline-color
    background: $post-code-inline-bg

  pre
    margin-top: 0
    margin-bottom: $post-paragraph-spacing
    padding: 1em
    line-height: 1.3
    background: $post-code-block-bg
    overflow: auto
    -webkit-overflow-scrolling: touch
    &::-webkit-scrollbar
      height: $code-scrollbar-height
    &::-webkit-scrollbar-thumb
      background: $code-scrollbar-color
      &:hover
        background: darken($code-scrollbar-color, 10%)

  hr
    height: 0
    margin: $post-paragraph-spacing * 2 0
    border: none
    border-top: 1px solid $post-hr-color


// post share
.post-share
  margin: 2em 0
  padding-top: .7em
  padding-bottom: .6em
  font-size: 28px
  text-align: center
  background: $post-share-bg
  &-icon
    margin: 0 10px
    text-decoration: none
    color: $post-share-color
    transition: color .15s linear
    outline: none
    &:hover
      color: $post-share-hover-color
    &:before
      @extend %icon
    &.twitter:before
      @extend %icon-twitter
    &.evernote:before
      @extend %icon-evernote
    &.weibo:before
      @extend %icon-sina-weibo


// comment
#disqus_thread > a
  color: $gradient-end


// footer
.footer
  margin-top: 50px
  padding-bottom: 30px
  font-size: $footer-font-size
  line-height: $footer-line-height
  text-align: center
  color: $footer-color
  &-entry
    margin: 0
    > a
      color: darken($footer-color, 15%)
      text-decoration: none
      transition: color .15s linear
      outline: none
      &:hover
        color: $footer-link-hover-color
